<%@ Page Language="c#" Inherits="WPS.Modules.StyleLibrary.Overview" CodeFile="Overview.aspx.cs" %>
<%@ Register TagPrefix="wps" TagName="PageMessageControl" Src="./PageMessageControl.ascx" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>{#stylelibrary_dlg.title}</title>
	<script type="text/javascript" src="/Default/Scripts/jquery/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
	<script type="text/javascript" src="../../utils/mctabs.js"></script>
	<script type="text/javascript" src="../../utils/form_utils.js"></script>
	<script type="text/javascript" src="../../utils/editable_selects.js"></script>
	<script type="text/javascript" src="js/overview.js"></script>
	<link rel="stylesheet" type="text/css" media="all" href="css/dialog.css" />
	<link rel="stylesheet" type="text/css" media="all" href="IncludeCss.aspx" />
	<script type="text/javascript">

		var selectedPanel = '<%= SelectedPanel %>';

		// Call opener to publish new style rules if invoked as popup window
		if (opener && opener.styleLib_RefreshStyles && selectedPanel != '') {
			var ar;

			// FIXME: this used class name arrays that I previously removed (by mistake :-( )
			/*
			switch (selectedPanel) {
			case 'headings':
			ar = new Array('h1', 'h2', 'h3', 'h4', 'h5', 'h6'); // Fake array, just for Refresh below
			break;
			case 'fonts':
			ar = fontStyleList;
			break;
			case 'tables':
			ar = tableStyleList;
			break;
			case 'images':
			ar = imageStyleList;
			break;
			case 'textboxes':
			ar = textBoxStyleList;
			break;
			case 'aligns':
			ar = alignStyleList;
			break;
			}
			if (ar) {
			opener.styleLib_RefreshStyles(ar);
			}
			*/
		}

		function makeUrl(plainUrl, mode, className) {
			var url = "";

			if (mode == "new") {
				url = plainUrl;
			}
			else if (mode == "edit") {
				url = plainUrl + "?class=" + className;
			}
			else if (mode == "delete") {
				url = plainUrl + "?class=" + className + "&delete=1";
			}
			else // Edit as new
			{
				url = plainUrl + "?class=" + className + "&asnew=1";
			}

			// Showing only one type of styles?
			if (selectedPanel != "") {
				url += (url.indexOf("?") == -1 ? "?" : "&") + "styles=" + selectedPanel;
			}

			return url;
		}

		// TABLE
		function editTable(mode, className) {
			selectedPanel = "tables";
			window.location.href = makeUrl("TableEdit.aspx", mode, className);
		}
		function deleteTable(className) {
			selectedPanel = "tables";
			if (confirm(tinyMCEPopup.editor.getLang('stylelibrary_dlg.confirm_delete'))) {
				window.location.href = makeUrl("TableEdit.aspx", "delete", className);
			}
		}
		function newTable() {
			window.location.href = "Examples.aspx?styles=tables";
		}

		// FONT
		function editFont(mode, className) {
			selectedPanel = "fonts";
			window.location.href = makeUrl("FontEdit.aspx", mode, className);
		}
		function deleteFont(className) {
			selectedPanel = "fonts";
			if (confirm(tinyMCEPopup.editor.getLang('stylelibrary_dlg.confirm_delete'))) {
				window.location.href = makeUrl("FontEdit.aspx", "delete", className);
			}
		}

		// HEADING
		function editHeading(mode) {
			selectedPanel = "headings";
			window.location.href = makeUrl("HeadingEdit.aspx", "edit", "h1");
		}

		// TEXT BOX
		function editTextBox(mode, className) {
			selectedPanel = "textboxes";
			window.location.href = makeUrl("TextBoxEdit.aspx", mode, className);
		}
		function deleteTextBox(className) {
			selectedPanel = "textboxes";
			if (confirm(tinyMCEPopup.editor.getLang('stylelibrary_dlg.confirm_delete'))) {
				window.location.href = makeUrl("TextBoxEdit.aspx", "delete", className);
			}
		}
		function newTextBox() {
			window.location.href = "Examples.aspx?styles=textboxes";
		}

		// IMAGE
		function editImage(mode, className) {
			selectedPanel = "images";
			window.location.href = makeUrl("ImageEdit.aspx", mode, className);
		}
		function deleteImage(className) {
			selectedPanel = "images";
			if (confirm(tinyMCEPopup.editor.getLang('stylelibrary_dlg.confirm_delete'))) {
				window.location.href = makeUrl("ImageEdit.aspx", "delete", className);
			}
		}
		function newImage() {
			window.location.href = "Examples.aspx?styles=images";
		}

	</script>
	<style type="text/css">
		div.preview {
			padding: 5px;
			background-color: #ffffff;
			border: 1px solid #888;
			border-top-width: 0;
			font-size: 12.8px; /* from default.css's 80% */
		}
		div.preview:first-child {
			border-top-width: 1px;
		}
	</style>
</head>
<body>
	<form runat="server" id="Form1">
	<wps:PageMessageControl runat="server" ID="pgmPageMessage" />
	<div class="tabs">
		<ul>
			<li id="headings_tab" class="<%= (SelectedPanel == "headings" ? "current" : "") %>"><span><a href="javascript:mcTabs.displayTab('headings_tab','headings_panel');" onmousedown="return false;">{#stylelibrary_dlg.headings_tab}</a></span></li>
			<li id="fonts_tab" class="<%= (SelectedPanel == "fonts" ? "current" : "") %>"><span><a href="javascript:mcTabs.displayTab('fonts_tab','fonts_panel');" onmousedown="return false;">{#stylelibrary_dlg.fonts_tab}</a></span></li>
			<li id="tables_tab" class="<%= (SelectedPanel == "tables" ? "current" : "") %>"><span><a href="javascript:mcTabs.displayTab('tables_tab','tables_panel');" onmousedown="return false;">{#stylelibrary_dlg.tables_tab}</a></span></li>
			<li id="images_tab" class="<%= (SelectedPanel == "images" ? "current" : "") %>"><span><a href="javascript:mcTabs.displayTab('images_tab','images_panel');" onmousedown="return false;">{#stylelibrary_dlg.images_tab}</a></span></li>
			<li id="textboxes_tab" class="<%= (SelectedPanel == "textboxes" ? "current" : "") %>"><span><a href="javascript:mcTabs.displayTab('textboxes_tab','textboxes_panel');" onmousedown="return false;">{#stylelibrary_dlg.textboxes_tab}</a></span></li>
		</ul>
	</div>
	<div class="panel_wrapper">
		<div id="headings_panel" class="panel <%= (SelectedPanel == "headings" ? "current" : "") %>">
			<fieldset runat="server" id="fldHeadingStyles">
				<legend>{#stylelibrary_dlg.headings_tab}</legend>
				<%= HeadingStylesList %>
			</fieldset>
		</div>
		<div id="fonts_panel" class="panel <%= (SelectedPanel == "fonts" ? "current" : "") %>">
			<fieldset runat="server" id="fldFontStyles">
				<legend>{#stylelibrary_dlg.fonts_tab}</legend>
				<%= FontStylesList %>
				<div style="text-align: left;">
					<input type="button" class="button" onclick="editFont('new');" value="{#stylelibrary_dlg.newstyle}" />
				</div>
			</fieldset>
		</div>
		<div id="tables_panel" class="panel <%= (SelectedPanel == "tables" ? "current" : "") %>">
			<fieldset runat="server" id="fldTableStyles">
				<legend>{#stylelibrary_dlg.tables_tab}</legend>
				<%= TableStylesList %>
				<div style="text-align: left;">
					<input type="button" class="button" onclick="newTable();" value="{#stylelibrary_dlg.newstyle}" />
				</div>
			</fieldset>
		</div>
		<div id="images_panel" class="panel <%= (SelectedPanel == "images" ? "current" : "") %>">
			<fieldset runat="server" id="fldImageStyles">
				<legend>{#stylelibrary_dlg.images_tab}</legend>
				<%= ImageStylesList %>
				<div style="text-align: left;">
					<input type="button" class="button" onclick="newImage();" value="{#stylelibrary_dlg.newstyle}" />
				</div>
			</fieldset>
		</div>
		<div id="textboxes_panel" class="panel <%= (SelectedPanel == "textboxes" ? "current" : "") %>">
			<fieldset runat="server" id="fldTextBoxStyles">
				<legend>{#stylelibrary_dlg.textboxes_tab}</legend>
				<%= TextBoxStylesList %>
				<div style="text-align: left;">
					<input type="button" class="button" onclick="newTextBox();" value="{#stylelibrary_dlg.newstyle}" />
				</div>
			</fieldset>
		</div>
		<p><em>{#stylelibrary_dlg.overviewnote}</em></p>
	</div>
	<div class="mceActionPanel">
		<div style="float: right">
			<input type="button" id="cancel" value="{#stylelibrary_dlg.close}" onclick="tinyMCEPopup.close();" />
		</div>
	</div>
	</form>
</body>
</html>
